﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Allaia | Bootstrap eCommerce Template - ThemeForest</title>

    <!-- Favicons-->
    <link rel="shortcut icon" th:href="@{/assets/img/favicon.ico}" type="image/x-icon">
    <link rel="apple-touch-icon" type="image/x-icon" th:href="@{/assets/img/apple-touch-icon-57x57-precomposed.png}">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" th:href="@{/assets/img/apple-touch-icon-72x72-precomposed.png}">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" th:href="@{/assets/img/apple-touch-icon-114x114-precomposed.png}">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" th:href="@{/assets/img/apple-touch-icon-144x144-precomposed.png}">
	
    <!-- GOOGLE WEB FONT -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">

    <!-- BASE CSS -->
    <link th:href="@{/assets/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/assets/css/style.css}" rel="stylesheet">

	<!-- SPECIFIC CSS -->
    <link th:href="@{/assets/css/checkout.css}" rel="stylesheet">

    <!-- YOUR CUSTOM CSS -->
    <link th:href="@{/assets/css/custom.css}" rel="stylesheet">

</head>

<body>
	
	<div id="page">
		
	<header class="version_1">
		<div class="layer"></div><!-- Mobile menu overlay mask -->
		<div class="main_header">
			<div class="container">
				<div class="row small-gutters">
					<div class="col-xl-3 col-lg-3 d-lg-flex align-items-center">
						<div id="logo">
							<a href="index.html"><img th:src="@{/assets/img/logo.svg}" alt="" width="100" height="35"></a>
						</div>
					</div>
					<nav class="col-xl-6 col-lg-7">
						<a class="open_close" href="javascript:void(0);">
							<div class="hamburger hamburger--spin">
								<div class="hamburger-box">
									<div class="hamburger-inner"></div>
								</div>
							</div>
						</a>
						<!-- Mobile menu button -->
						<div class="main-menu">
							<div id="header_menu">
								<a href="index.html"><img th:src="@{/assets/img/logo_black.svg}" alt="" width="100" height="35"></a>
								<a href="#" class="open_close" id="close_in"><i class="ti-close"></i></a>
							</div>
							<ul>
								<li class="submenu">
									<a th:href="@{/index}" class="show-submenu">首页</a>
									<ul>
										<li><a href="index.html">Slider</a></li>
										<li><a href="index-2.html">Video Background</a></li>
										<li><a href="index-3.html">Vertical Slider</a></li>
										<li><a href="index-4.html">GDPR Cookie Bar</a></li>
									</ul>
								</li>
								<li class="megamenu submenu">
									<a href="javascript:void(0);" class="show-submenu-mega">Pages</a>
									<div class="menu-wrapper">
										<div class="row small-gutters">
											<div class="col-lg-3">
												<h3>Listing grid</h3>
												<ul>
													<li><a href="listing-grid-1-full.html">Grid Full Width</a></li>
													<li><a href="listing-grid-2-full.html">Grid Full Width 2</a></li>
													<li><a href="listing-grid-3.html">Grid Boxed</a></li>
													<li><a href="listing-grid-4-sidebar-left.html">Grid Sidebar Left</a></li>
													<li><a href="listing-grid-5-sidebar-right.html">Grid Sidebar Right</a></li>
													<li><a href="listing-grid-6-sidebar-left.html">Grid Sidebar Left 2</a></li>
													<li><a href="listing-grid-7-sidebar-right.html">Grid Sidebar Right 2</a></li>
												</ul>
											</div>
											<div class="col-lg-3">
												<h3>Listing row &amp; Product</h3>
												<ul>
													<li><a href="listing-row-1-sidebar-left.html">Row Sidebar Left</a></li>
													<li><a href="listing-row-2-sidebar-right.html">Row Sidebar Right</a></li>
													<li><a href="listing-row-3-sidebar-left.html">Row Sidebar Left 2</a></li>
													<li><a href="listing-row-4-sidebar-extended.html">Row Sidebar Extended</a></li>
													<li><a href="product-detail-1.html">Product Large Image</a></li>
													<li><a href="product-detail-2.html">Product Carousel</a></li>
													<li><a href="product-detail-3.html">Product Sticky Info</a></li>
												</ul>
											</div>
											<div class="col-lg-3">
												<h3>Other pages</h3>
												<ul>
													<li><a href="cart.html">Cart Page</a></li>
													<li><a href="order.html">Check Out Page</a></li>
													<li><a href="confirm.html">Confirm Purchase Page</a></li>
													<li><a href="account.html">Create Account Page</a></li>
													<li><a href="track-order.html">Track Order</a></li>
													<li><a href="help.html">Help Page</a></li>
													<li><a href="help-2.html">Help Page 2</a></li>
													<li><a href="leave-review.html">Leave a Review</a></li>
												</ul>
											</div>
											<div class="col-lg-3 d-xl-block d-lg-block d-md-none d-sm-none d-none">
												<div class="banner_menu">
													<a href="#0">
														<img src="" th:attr="data-src=@{/assets/img/banner_menu.jpg}"  width="400" height="550" alt="" class="img-fluid lazy">
													</a>
												</div>
											</div>
										</div>
										<!-- /row -->
									</div>
									<!-- /menu-wrapper -->
								</li>
								<li class="submenu">
									<a href="javascript:void(0);" class="show-submenu">Extra Pages</a>
									<ul>
										<li><a href="header-2.html">Header Style 2</a></li>
										<li><a href="header-3.html">Header Style 3</a></li>
										<li><a href="header-4.html">Header Style 4</a></li>
										<li><a href="header-5.html">Header Style 5</a></li>
										<li><a href="404.html">404 Page</a></li>
										<li><a href="sign-in-modal.html">Sign In Modal</a></li>
										<li><a href="contacts.html">Contact Us</a></li>
										<li><a href="about.html">About 1</a></li>
										<li><a href="about-2.html">About 2</a></li>
										<li><a href="modal-advertise.html">Modal Advertise</a></li>
										<li><a href="modal-newsletter.html">Modal Newsletter</a></li>
									</ul>
								</li>
								<li>
									<a href="blog.html">Blog</a>
								</li>
								<li>
									<a href="#0">Buy Template</a>
								</li>
							</ul>
						</div>
						<!--/main-menu -->
					</nav>
					<div class="col-xl-3 col-lg-2 d-lg-flex align-items-center justify-content-end text-end">
						<a class="phone_top" href="tel://9438843343"><strong><span>Need Help?</span>+94 423-23-221</strong></a>
					</div>
				</div>
				<!-- /row -->
			</div>
		</div>
		<!-- /main_header -->

		<div class="main_nav inner Sticky">
			<div class="container">
				<div class="row small-gutters">
					<div class="col-xl-3 col-lg-3 col-md-3">
						<nav class="categories">
							<ul class="clearfix">
								<li><span>
										<a href="#">
											<span class="hamburger hamburger--spin">
												<span class="hamburger-box">
													<span class="hamburger-inner"></span>
												</span>
											</span>
											Categories
										</a>
									</span>
									<div id="menu">
										<ul>
											<li><span><a href="#0">Collections</a></span>
												<ul>
													<li><a href="listing-grid-1-full.html">Trending</a></li>
													<li><a href="listing-grid-2-full.html">Life style</a></li>
													<li><a href="listing-grid-3.html">Running</a></li>
													<li><a href="listing-grid-4-sidebar-left.html">Training</a></li>
													<li><a href="listing-grid-5-sidebar-right.html">View all Collections</a></li>
												</ul>
											</li>
											<li><span><a href="#">Men</a></span>
												<ul>
													<li><a href="listing-grid-6-sidebar-left.html">Offers</a></li>
													<li><a href="listing-grid-7-sidebar-right.html">Shoes</a></li>
													<li><a href="listing-row-1-sidebar-left.html">Clothing</a></li>
													<li><a href="listing-row-3-sidebar-left.html">Accessories</a></li>
													<li><a href="listing-row-4-sidebar-extended.html">Equipment</a></li>
												</ul>
											</li>
											<li><span><a href="#">Women</a></span>
												<ul>
													<li><a href="listing-grid-1-full.html">Best Sellers</a></li>
													<li><a href="listing-grid-2-full.html">Clothing</a></li>
													<li><a href="listing-grid-3.html">Accessories</a></li>
													<li><a href="listing-grid-4-sidebar-left.html">Shoes</a></li>
												</ul>
											</li>
											<li><span><a href="#">Boys</a></span>
												<ul>
													<li><a href="listing-grid-6-sidebar-left.html">Easy On Shoes</a></li>
													<li><a href="listing-grid-7-sidebar-right.html">Clothing</a></li>
													<li><a href="listing-row-3-sidebar-left.html">Must Have</a></li>
													<li><a href="listing-row-4-sidebar-extended.html">All Boys</a></li>
												</ul>
											</li>
											<li><span><a href="#">Girls</a></span>
												<ul>
													<li><a href="listing-grid-1-full.html">New Releases</a></li>
													<li><a href="listing-grid-2-full.html">Clothing</a></li>
													<li><a href="listing-grid-3.html">Sale</a></li>
													<li><a href="listing-grid-4-sidebar-left.html">Best Sellers</a></li>
												</ul>
											</li>
											<li><span><a href="#">Customize</a></span>
												<ul>
													<li><a href="listing-row-1-sidebar-left.html">For Men</a></li>
													<li><a href="listing-row-2-sidebar-right.html">For Women</a></li>
													<li><a href="listing-row-4-sidebar-extended.html">For Boys</a></li>
													<li><a href="listing-grid-1-full.html">For Girls</a></li>
												</ul>
											</li>
										</ul>
									</div>
								</li>
							</ul>
						</nav>
					</div>
					<div class="col-xl-6 col-lg-7 col-md-6 d-none d-md-block">
						<div class="custom-search-input">
							<input type="text" placeholder="Search over 10.000 products">
							<button type="submit"><i class="header-icon_search_custom"></i></button>
						</div>
					</div>
					<div class="col-xl-3 col-lg-2 col-md-3">
						<ul class="top_tools">
							<li>
								<div class="dropdown dropdown-cart">
									<a th:href="@{/cart/list}" class="cart_bt"><strong id="cartItemCount" th:text="${items?.size()}">2</strong></a>
									<div class="dropdown-menu">
										<ul>
											<li th:each="c:${items}">
												<a th:href="@{/good/detail(id=${c.getGood().id})}">
													<figure><img th:src="${c.getGood().picUrl}" th:attr="data-src=@{${c.getGood().getPicUrl()}}"  alt="" width="50" height="50" class="lazy"></figure>
													<strong>
														<span th:text="${c.getGood().getName()}">1x Armor Air x Fear</span>
														<span th:text="${'￥'+c.getGood().getPrice()+'  X '+c.amount+' 件'}"></span>
														<input type="hidden" th:class="goodPrice" th:value="${c.getGood().getPrice()}">
														<input type="hidden" th:class="goodAmount" th:value="${c.amount}">
													</strong>
												</a>
												<a href="#0" class="action"><i class="ti-trash"></i></a>
											</li>
										</ul>
										<div class="total_drop">
											<div class="clearfix"><strong>Total</strong><span id="cartTotal">$0</span></div>
											<a th:href="@{/cart/list}" class="btn_1 outline">View Cart</a><a href="order.html" class="btn_1">Checkout</a>
										</div>
									</div>
								</div>
								<!-- /dropdown-cart-->
							</li>
							<li>
								<a href="#0" class="wishlist"><span>Wishlist</span></a>
							</li>
							<li>
								<div class="dropdown dropdown-access">
									<a th:href="@{/personal/orders}" class="access_link"><span>Account</span></a>
									<div class="dropdown-menu">
										<a href="#" class="btn_1" id="sing-in-up">登录/注册</a>
										<ul>
											<li>
												<a href="track-order.html"><i class="ti-truck"></i>查询订单</a>
											</li>
											<li>
												<a th:href="@{/personal/orders}"><i class="ti-package"></i>我的订单</a>
											</li>
											<li>
												<a href="account.html"><i class="ti-user"></i>我的账户</a>
											</li>
											<li>
												<a href="help.html"><i class="ti-help-alt"></i>常见问题</a>
											</li>
										</ul>
									</div>
								</div>
								<!-- /dropdown-access-->
							</li>
							<li>
								<a href="javascript:void(0);" class="btn_search_mob"><span>Search</span></a>
							</li>
							<li>
								<a href="#menu" class="btn_cat_mob">
									<div class="hamburger hamburger--spin" id="hamburger">
										<div class="hamburger-box">
											<div class="hamburger-inner"></div>
										</div>
									</div>
									Categories
								</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- /row -->
			</div>
			<div class="search_mob_wp">
				<input type="text" class="form-control" placeholder="Search over 10.000 products">
				<input type="submit" class="btn_1 full-width" value="Search">
			</div>
			<!-- /search_mobile -->
		</div>
		<!-- /main_nav -->
	</header>
	<!-- /header -->
	
	<main class="bg_gray">
	
		
	<div class="container margin_30">
		<div class="page_header">
			<div class="breadcrumbs">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">Account</a></li>
					<li>My Order</li>
				</ul>
		</div>
		<h1>完善订单信息</h1>

	</div>
	<!-- /page_header -->
			<div class="row">
				<div class="row no-gutters">
					<div class="col-md-12 form-group">
						<div class="custom-select-form">
							<select class="wide add_bottom_15" name="country" id="user-addr">
								<option th:each="address:${addresses}" th:value="${address.id}" th:text="${address}">
								</option>
							</select>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="step first">
						<h3>1. 收货地址</h3>
<!--					<ul class="nav nav-tabs" id="tab_checkout" role="tablist">-->
<!--					  <li class="nav-item">-->
<!--						<a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#tab_1" role="tab" aria-controls="tab_1" aria-selected="true">Register</a>-->
<!--					  </li>-->
<!--					  <li class="nav-item">-->
<!--						<a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#tab_2" role="tab" aria-controls="tab_2" aria-selected="false">Login</a>-->
<!--					  </li>-->
<!--					</ul>-->
					<div class="tab-content checkout">

						<div class="tab-pane fade show active" id="tab_1" role="tabpanel" aria-labelledby="tab_1">
<!--							<div class="form-group">-->
<!--								<input type="email" class="form-control" placeholder="Email">-->
<!--							</div>-->
<!--							<div class="form-group">-->
<!--								<input type="password" class="form-control" placeholder="Password">-->
<!--							</div>-->
							<hr>
							<div class="row no-gutters">
								<div class="col-6 form-group pr-1">
									<input type="text" class="form-control" id="receiver" placeholder="收件人">
								</div>
								<div class="col-6 form-group pr-1">
									<input type="text" class="form-control" id="receiverPhone" placeholder="电话">
								</div>
<!--								<div class="col-6 form-group pl-1">-->
<!--									<input type="text" class="form-control" placeholder="Last Name">-->
<!--								</div>-->
							</div>
							<!-- /row -->
							<div class="row no-gutters">
								<div class="col-6 form-group pr-1">
									<input type="text" class="form-control" id="province" placeholder="省">
								</div>
								<div class="col-6 form-group pl-1">
									<input type="text" class="form-control" id="city" placeholder="市">
								</div>
							</div>
							<div class="row no-gutters">
								<div class="col-6 form-group pr-1">
									<input type="text" class="form-control" id="area" placeholder="区">
								</div>
								<div class="col-6 form-group pl-1">
									<input type="text" class="form-control" id="street" placeholder="街道">
								</div>
							</div>


							<div class="form-group">
								<input type="text" class="form-control"  id="addrDetail" placeholder="详细地址">
							</div>

							<!-- /row -->
<!--							<div class="row no-gutters">-->
<!--								<div class="col-md-12 form-group">-->
<!--									<div class="custom-select-form">-->
<!--										<select class="wide add_bottom_15" name="country" id="country">-->
<!--											<option value="" selected>Country</option>-->
<!--											<option value="Europe">China</option>-->
<!--											<option value="United states">United states</option>-->
<!--											<option value="Asia">Asia</option>-->
<!--										</select>-->
<!--									</div>-->
<!--								</div>-->
<!--							</div>-->
							<!-- /row -->
<!--							<div class="form-group">-->
<!--								<input type="text" class="form-control" placeholder="电话">-->
<!--							</div>-->
							<hr>
<!--							<div class="form-group">-->
<!--								<label class="container_check" id="other_addr">Other billing address-->
<!--								  <input type="checkbox">-->
<!--								  <span class="checkmark"></span>-->
<!--								</label>-->
<!--							</div>-->
<!--							<div id="other_addr_c" class="pt-2">-->
<!--							<div class="row no-gutters">-->
<!--								<div class="col-6 form-group pr-1">-->
<!--									<input type="text" class="form-control" placeholder="Name">-->
<!--								</div>-->
<!--								<div class="col-6 form-group pl-1">-->
<!--									<input type="text" class="form-control" placeholder="Last Name">-->
<!--								</div>-->
<!--							</div>-->
<!--							&lt;!&ndash; /row &ndash;&gt;-->
<!--							<div class="form-group">-->
<!--								<input type="text" class="form-control" placeholder="Full Address">-->
<!--							</div>-->
<!--							<div class="row no-gutters">-->
<!--								<div class="col-6 form-group pr-1">-->
<!--									<input type="text" class="form-control" placeholder="City">-->
<!--								</div>-->
<!--								<div class="col-6 form-group pl-1">-->
<!--									<input type="text" class="form-control" placeholder="Postal code">-->
<!--								</div>-->
<!--							</div>-->
<!--							&lt;!&ndash; /row &ndash;&gt;-->
<!--							<div class="row no-gutters">-->
<!--								<div class="col-md-12 form-group">-->
<!--									<div class="custom-select-form">-->
<!--										<select class="wide add_bottom_15" name="country" id="country_2">-->
<!--											<option value="" selected>Country</option>-->
<!--											<option value="Europe">Europe</option>-->
<!--											<option value="United states">United states</option>-->
<!--											<option value="Asia">Asia</option>-->
<!--										</select>-->
<!--									</div>-->
<!--								</div>-->
<!--							</div>-->
<!--							&lt;!&ndash; /row &ndash;&gt;-->
<!--							<div class="form-group">-->
<!--								<input type="text" class="form-control" placeholder="Telephone">-->
<!--							</div>-->
<!--							</div>-->
<!--							&lt;!&ndash; /other_addr_c &ndash;&gt;-->
							<hr>
						</div>
						<!-- /tab_1 -->
					  <div class="tab-pane fade" id="tab_2" role="tabpanel" aria-labelledby="tab_2" style="position: relative;">
						  <a href="#0" class="social_bt facebook">Login con Facebook</a>
						  <a href="#0" class="social_bt google">Login con Google</a>
						  <div class="form-group">
								<input type="email" class="form-control" placeholder="Email">
							</div>
							<div class="form-group">
								<input type="password" class="form-control" placeholder="Password" name="password_in" id="password_in">
							</div>
						  	<div class="clearfix add_bottom_15">
								<div class="checkboxes float-start">
									<label class="container_check">Remember me
										<input type="checkbox">
										<span class="checkmark"></span>
									</label>
								</div>
								<div class="float-end"><a id="forgot" href="#0">Lost Password?</a></div>
							</div>
							  <div id="forgot_pw">
								<div class="form-group">
									<input type="email" class="form-control" name="email_forgot" id="email_forgot" placeholder="Type your email">
								</div>
								<p>A new password will be sent shortly.</p>
								<div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
							</div>
							<hr>
						  	<input type="submit" class="btn_1 full-width" value="Login">
						</div>
						<!-- /tab_2 -->
					</div>
					</div>
					<!-- /step -->
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="step middle payments">
						<h3>2. 支付方式</h3>
							<ul id="payUl">
								<li>
									<label class="container_radio">微信<a href="#0" class="info" data-bs-toggle="modal" data-bs-target="#payments_method"></a>
										<input type="radio" name="payment" value="微信" checked>
										<span class="checkmark"></span>
									</label>
								</li>
								<li>
									<label class="container_radio">支付宝<a href="#0" class="info" data-bs-toggle="modal" data-bs-target="#payments_method"></a>
										<input type="radio" name="payment" value="支付宝">
										<span class="checkmark"></span>
									</label>
								</li>
								<li>
									<label class="container_radio">银行卡或信用卡<a href="#0" class="info" data-bs-toggle="modal" data-bs-target="#payments_method"></a>
										<input type="radio" name="payment" value="银行卡或信用卡">
										<span class="checkmark"></span>
									</label>
								</li>
							</ul>
<!--							<div class="payment_info d-none d-sm-block"><figure><img th:src="@{/assets/img/cards_all.svg}" alt=""></figure>	<p>Sensibus reformidans interpretaris sit ne, nec errem nostrum et, te nec meliore philosophia. At vix quidam periculis. Solet tritani ad pri, no iisque definitiones sea.</p></div>-->
<!--							-->
<!--							<h6 class="pb-2">Shipping Method</h6>-->
<!--							-->
<!--						-->
<!--						<ul>-->
<!--								<li>-->
<!--									<label class="container_radio">Standard shipping<a href="#0" class="info" data-bs-toggle="modal" data-bs-target="#payments_method"></a>-->
<!--										<input type="radio" name="shipping" checked>-->
<!--										<span class="checkmark"></span>-->
<!--									</label>-->
<!--								</li>-->
<!--								<li>-->
<!--									<label class="container_radio">Express shipping<a href="#0" class="info" data-bs-toggle="modal" data-bs-target="#payments_method"></a>-->
<!--										<input type="radio" name="shipping">-->
<!--										<span class="checkmark"></span>-->
<!--									</label>-->
<!--								</li>-->
<!--								-->
<!--							</ul>-->
						
					</div>
					<!-- /step -->
					
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="step last">
						<h3>3. 商品详情</h3>
					<div class="box_general summary">
						<ul>
							<li class="clearfix" th:each="o:${order.items}"><em th:text="${o.getAmount()+'x '+ o.goodName}">1x Armor Air X Fear</em>  <span th:text="${'￥'+o.price}">$145.00</span></li>
						</ul>
						<ul>
<!--							<li class="clearfix"><em><strong>Subtotal</strong></em>  <span th:text="">$450.00</span></li>-->
							<li class="clearfix"><em><strong>Shipping</strong></em> <span th:text="${'￥'+order.shipping}">$0</span></li>
							
						</ul>
						<div class="total clearfix">TOTAL <span th:text="${'￥'+order.subTotal}">$450.00</span></div>
						<div class="form-group">
								<label class="container_check">Register to the Newsletter.
								  <input type="checkbox" checked>
								  <span class="checkmark"></span>
								</label>
							</div>
						
						<a href="javascript:void(0)" class="btn_1 full-width" id="submit-order">确认订单并支付</a>
						<input type="hidden" id="current-order" th:value="${order.id}" >
					</div>
					<!-- /box_general -->
					</div>
					<!-- /step -->
				</div>
			</div>
			<!-- /row -->
		</div>
		<!-- /container -->
	</main>
	<!--/main-->
	
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-lg-3 col-md-6">
					<h3 data-bs-target="#collapse_1">Quick Links</h3>
					<div class="collapse dont-collapse-sm links" id="collapse_1">
						<ul>
							<li><a href="about.html">About us</a></li>
							<li><a href="help.html">Faq</a></li>
							<li><a href="help.html">Help</a></li>
							<li><a href="account.html">My account</a></li>
							<li><a href="blog.html">Blog</a></li>
							<li><a href="contacts.html">Contacts</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-md-6">
					<h3 data-bs-target="#collapse_2">Categories</h3>
					<div class="collapse dont-collapse-sm links" id="collapse_2">
						<ul>
							<li><a href="listing-grid-1-full.html">Clothes</a></li>
							<li><a href="listing-grid-2-full.html">Electronics</a></li>
							<li><a href="listing-grid-1-full.html">Furniture</a></li>
							<li><a href="listing-grid-3.html">Glasses</a></li>
							<li><a href="listing-grid-1-full.html">Shoes</a></li>
							<li><a href="listing-grid-1-full.html">Watches</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-md-6">
						<h3 data-bs-target="#collapse_3">Contacts</h3>
					<div class="collapse dont-collapse-sm contacts" id="collapse_3">
						<ul>
							<li><i class="ti-home"></i>97845 Baker st. 567<br>Los Angeles - US</li>
							<li><i class="ti-headphone-alt"></i>+94 423-23-221</li>
							<li><i class="ti-email"></i><a href="#0">info@allaia.com</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-3 col-md-6">
						<h3 data-bs-target="#collapse_4">Keep in touch</h3>
					<div class="collapse dont-collapse-sm" id="collapse_4">
						<div id="newsletter">
						    <div class="form-group">
						        <input type="email" name="email_newsletter" id="email_newsletter" class="form-control" placeholder="Your email">
						        <button type="submit" id="submit-newsletter"><i class="ti-angle-double-right"></i></button>
						    </div>
						</div>
						<div class="follow_us">
							<h5>Follow Us</h5>
							<ul>
								<li><a href="#0"><img src="" th:attr="data-src=@{/assets/img/twitter_icon.svg}"  alt="" class="lazy"></a></li>
								<li><a href="#0"><img src="" th:attr="data-src=@{/assets/img/facebook_icon.svg}"  alt="" class="lazy"></a></li>
								<li><a href="#0"><img src="" th:attr="data-src=@{/assets/img/instagram_icon.svg}" alt="" class="lazy"></a></li>
								<li><a href="#0"><img src="" th:attr="data-src=@{/assets/img/youtube_icon.svg}"  alt="" class="lazy"></a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- /row-->
			<hr>
			<div class="row add_bottom_25">
				<div class="col-lg-6">
					<ul class="footer-selector clearfix">
						<li>
							<div class="styled-select lang-selector">
								<select>
									<option value="English" selected>English</option>
									<option value="French">French</option>
									<option value="Spanish">Spanish</option>
									<option value="Russian">Russian</option>
								</select>
							</div>
						</li>
						<li>
							<div class="styled-select currency-selector">
								<select>
									<option value="US Dollars" selected>US Dollars</option>
									<option value="Euro">Euro</option>
								</select>
							</div>
						</li>
						<li><img src="" th:attr="data-src=@{/assets/img/cards_all.svg}"  alt="" width="198" height="30" class="lazy"></li>
					</ul>
				</div>
				<div class="col-lg-6">
					<ul class="additional_links">
						<li><a href="#0">Terms and conditions</a></li>
						<li>By <a href="http://www.bootstrapmb.com">Reserved</a></li>
						<li><span>© 2022 Allaia</span></li>
					</ul>
				</div>
			</div>
		</div>
	</footer>
	<!--/footer-->
	</div>
	<!-- page -->
	
	<div id="toTop"></div><!-- Back to top button -->
	<!-- Modal Payments Method-->
	<div class="modal fade" id="payments_method" tabindex="-1" role="dialog" aria-labelledby="payments_method_title" aria-hidden="true">
	  <div class="modal-dialog modal-dialog-centered" role="document">
		<div class="modal-content">
		  <div class="modal-header">
			<h5 class="modal-title" id="payments_method_title">Payments Methods</h5>
			<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
		  </div>
		  <div class="modal-body">
			<p>Lorem ipsum dolor sit amet, oratio possim ius cu. Labore prompta nominavi sea ei. Sea no animal saperet gloriatur, ius iusto ullamcorper ad. Qui ignota reformidans ei, vix in elit conceptam adipiscing, quaestio repudiandae delicatissimi vis ei. Fabulas accusamus no has.</p>
			 <p>Et nam vidit zril, pri elaboraret suscipiantur ut. Duo mucius gloriatur at, in vis integre labitur dolores, mei omnis utinam labitur id. An eum prodesset appellantur. Ut alia nemore mei, at velit veniam vix, nonumy propriae conclusionemque ea cum.</p>
		  </div>
		</div>
	  </div>
	</div>
	
	<!-- COMMON SCRIPTS -->
    <script th:src="@{/assets/js/common_scripts.min.js}"></script>
    <script th:src="@{/assets/js/main.js}"></script>
	<script th:src="@{/assets/good/order.js}"></script>
	<script th:src="@{/assets/lib/layer/layer.js}"></script>
	<script th:inline="javascript">
		let ctx = /*[[@{/}]]*/"";
		if (ctx.endsWith("/")){
			ctx = ctx.substring(0,ctx.length-1);
		}

	</script>
    <script>
    	// Other address Panel
		$('#other_addr input').on("change", function (){
	        if(this.checked)
	            $('#other_addr_c').fadeIn('fast');
	        else
	            $('#other_addr_c').fadeOut('fast');
	    });
	</script>
		
</body>
</html>